<template>
	<div class="top_t">
		<div class="top_1">
			<h4 style="margin: 0px;padding: 0px;">车场管理</h4>
			<div class="sub_1">可以区分不同停车场对车位进行管理。常见的分类有“负一停车场”、“负二停车场”、“地面停车场”、“A区停车场”、“B区停车场”等</div>
			<div class="sub_2">如果配合停车道闸使用，可按照道闸实际情况相应创建停车场</div>
		</div>
		<div class="t-div">
			<div style="height: 20px; color: rgb(0,195,109);font-size: 24px;font-weight: 700;">222</div>
			<div style="color: #7e8081;font-size: 14px;height: 14px;font-weight: 700;">车位总数</div>
		</div>
	</div>
	<div class="bot">
		<div class="bot_left_1">
			<h4 style="margin: 0px; padding: 0px; letter-spacing: 2px; text-align: left;">停车场</h4>
			<div class="kpxs">
			       <el-card shadow="hover" class="kap" v-for="(yard, index) in data.yard" :key="index" @click="selectCar(yard.yard_id)">
			              {{ yard.yard_name }}
						  <div class="cz">
							  <el-button @click="editYard(yard.yard_id)">编辑</el-button>
							  <el-button @click="delYard(yard.yard_id)">删除</el-button>
						  </div>
						  
			        </el-card>
					<el-dialog v-model="UpdateDialogVisible" title="" :width="'300px'" class="el-dia">
						<form>
							<el-input placeholder="请输入新的车场名" v-model="updateForm.newYardName"></el-input>
						</form>
						<template #footer>
							<div class="dialog-footer">
								<el-button @click="UpdateDialogVisible = false">取消</el-button>
								<el-button type="primary" @click="updateYard()">确定</el-button>
							</div>
						</template>
					</el-dialog>
			</div>
				<div class="addyardbtn">
					<button class="t-btn_1" @click="centerDialogVisible = true">+添加停车场</button>
				</div>

		</div>
		<el-dialog v-model="centerDialogVisible" title="" :width="'300px'" class="el-dia">
			<form>
				<el-input placeholder="请输入停车场" v-model="form.yard_name"></el-input>
			</form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="addYard">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<div class="bot_rig_2">
			<h4 style="margin: 0px;padding: 0px; text-align: left;margin-bottom: 100px;">车场信息</h4>
			<div class="parking-info">
				<div class="parking-info_1">
					<img src="../img/车位.png" style="width: 350px;height: 100%;" />
					<div>
						<div style="color: rgb(0,195,109); margin-top: 40px;font-size: 32px;font-weight: 700;">
							{{carsum}}
						</div>
						<div style="font-size: 14px;">车位数量</div>
						<el-button @click="AddCarwei" style="padding: 10px 20px;color: white; background-color: #00c36d;border: none;margin-top: 30px;">
							去添加车位
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
  import { ref, reactive,onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import $http from '../router/AxiosApi.js'; 

  const router = useRouter();
  const centerDialogVisible = ref(false);
  const UpdateDialogVisible = ref(false);
  const value1 = ref(true);
  const value2 = ref(true);
  const emits = defineEmits(['update']); // 定义 emits 以便在组件中使用

  	onMounted(() => {
  		loadYard()
  	})

  const AddCarwei = () => {
    router.push({ name: 'AddCarwei' });
  };

	
	//添加
  const form=reactive({
	  yard_name:''
  })
  const addYard = () => {
    centerDialogVisible.value = false;
    $http.post("Yard/insertYard", form).then((res) => {
    	Object.assign(form, res.data);
		console.log(form)
		loadYard()
    });
  };
  
  //查询
  const data=reactive({
  		yard: []
  	})

  	const loadYard=()=>{
  		$http.get("Yard/selectYard")
  			.then((res) => {
  				console.log(res.data)
  				data.yard = res.data.data 
  			})
  	}
	
	//修改
	const id = ref('');
	const updateForm = ref({ newYardName: '' });
	const newYard = ref({ yard_id: '', yard_name: '' });
	const editYard = (yardId) => {
	    UpdateDialogVisible.value = true;
	    updateForm.value.newYardName = ''; // 确保清空表单
	    id.value = yardId; // 直接赋值给 id，不需要 id.value.yardid
	    console.log("id:", id.value); 
	    newYard.value.yard_id = yardId;
	}
	const updateYard = () => {
		// 将 id 和 updateForm 的值赋给 newYard
		
		newYard.value.yard_name = updateForm.value.newYardName;
	    const newYardName = updateForm.value.newYardName;
	    console.log("xin:", newYard.value);
	    console.log('新车场名:', newYardName);
	    $http.put("Yard/updateYard", newYard.value).then((res) => {
	        Object.assign(newYard.value, res.data); // 更新 newYard 的值
	        UpdateDialogVisible.value = false;
	        console.log(newYard.value);
	        loadYard();
	    });
	}
	
	//删除
	import { ElMessage } from 'element-plus'
	const delYard = (yard_id) => {
	    console.log(yard_id); 
	
	    // 发起 DELETE 请求
	    $http.delete(`Yard/deleteYard/${yard_id}`)
	        .then((res) => {
	            console.log("删除成功", res);
	            ElMessage({
	                message: '删除成功',
	                type: 'success',
	            });
				loadYard();
	        })
	        .catch((err) => {
	            console.error("删除失败", err);
	            ElMessage({
	                message: '删除失败',
	                type: 'error',
	            });
				loadYard();
	        });
			
	};
	

	const carsum = ref(null); // 初始化为一个空字符串，可以根据实际需要调整初始值

	const selectCar = (yard_id) => {
		console.log(yard_id);
		
		$http.get(`Yard/selectCar/${yard_id}`)
		    .then((res) => {
		        console.log(res.data);
		        carsum.value = res.data.data[0].total_parkings; // 更新 carsum 的值
		        console.log("数量", carsum.value); // 确保在这里访问 carsum.value
		    })
		    .catch((error) => {
		        console.error('Error fetching car data:', error);
		    });
	}

</script>

<style>
	.top_t {
		border-radius: 10px;
		background-color: white;
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.bot {
		margin-top: 15px;
		overflow: hidden;
	}

	.bot_left_1 {
		border-radius: 10px;
		background-color: white;
		width: 300px;
		height: 654px;
		float: left;
		margin-right: 10px;
		padding: 10px;
		
	}

	.sub_1 {
		margin-top: 8px;
		font-size: 14px !important;
		color: #7e8081;
	}

	.sub_2 {
		margin-top: 2px;
		font-size: 14px !important;
		color: #7e8081;
	}

	.t-div {
		padding: 0px;
		margin: 0px;
		font-size: 14px;
		text-align: center;
		line-height: 100px;
	}

	.t-btn_1 {
		background-color: white;
		border: none;
		color: #395899;
		height: 76px;
		margin-top: 5px;
		position: absolute;
		top: 788px;
		left: 230px;
		width: 290px;
	}

	.bot_rig_2 {
		background-color: white;
		float: left;
		width: 1045px;
		height: 650px;
		padding: 10px;
		border-radius: 10px;
		margin-left: 340px;
		margin-top: -672px;
	}

	.parking-info {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		height: 92%;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.parking-info_1{
		display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-orient: vertical;
		    -webkit-box-direction: normal;
		    -ms-flex-direction: column;
		    flex-direction: column;
		    -webkit-box-align: center;
		    -ms-flex-align: center;
		    align-items: center;
	}
	.el-dialog {
		margin-top: 15vh;
		width: 1040px;
	}

	.top_1 {
		text-align: left;
	}

	.el-input {
		width: 300px;
		height: 40px;
	}

	.kq {
		text-align: left;
	}

	.el-dia {
		width: 400px;
		border-radius: 10px;
	}

	.el-dialog__body {
		padding: 24px 32px;
		color: #2b3451;
		font-size: 14px;
		word-break: break-all;
	}

	.add-building-dialog-content {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.add-building-dialog-container {
		padding: 80px 32px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		justify-content: space-between;
	}

	.add-building-item {
		margin-bottom: 34px;
	}

	.el-switch {
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		position: relative;
		font-size: 14px;
		line-height: 20px;
		height: 20px;
		vertical-align: middle;
	}

	.el-input_switch {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
	}

	.el-switch_core {
		margin: 0;
		display: inline-block;
		position: relative;
		width: 40px;
		height: 20px;
		border: 1px solid #dcdfe6;
		outline: none;
		border-radius: 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: #dcdfe6;
		cursor: pointer;
		-webkit-transition: border-color .3s, background-color .3s;
		transition: border-color .3s, background-color .3s;
		vertical-align: middle;
	}

	.el-switch.is-checked .el-switch__core::after {
		left: 100%;
		margin-left: -17px;
	}

	.el-switch__core::after {
		content: "";
		position: absolute;
		top: 1px;
		left: 1px;
		border-radius: 100%;
		-webkit-transition: all .3s;
		transition: all .3s;
		width: 16px;
		height: 16px;
		background-color: #fff;
	}

	.l-tip {
		font-size: 14px;
		color: #c2c2c2;
	}

	.el-image {
		position: relative;
		display: inline-block;
		overflow: hidden;
	}

	.but3 {
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
	}

	.but4 {
		min-width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0 20px;
		color: #fff;
		background-color: #80e1b6;
		border-color: #80e1b6;
	}

	.bot_rig {
		border-radius: 10px;
		background-color: white;
		width: 300px;
		float: left;
	}
	.kap{
		text-align: left;
		height: 60px;
		line-height: 10px;
		margin-top: 16px;
		font-weight: 600;
	}
	.cz{
		position: relative;
		right: -125px;
		top: -16px;
	}
	.addyardbtn{
		width: 280px;
		height: 85px;
		margin-top: -60px;
		background-color: white;
	}
	.kpxs{
		margin-top: 15px;
		height: 520px;
		overflow: auto; /* 添加溢出自动滚动 */
	}
</style>